<template>
  <view>
    <!-- 信息 -->
    <view class="info_box">
      <!-- 性别 -->
      <view class="info_item" @click="sexShow=!sexShow">
        <text class="info_left">性别</text>
        <view class="info_right">
          <u-select v-model="sexShow" mode="single-column" :list="list" @confirm="confirm"></u-select>
          <text>{{ sex || '请选择您的性别' }} </text>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      <!-- 出生日期 -->
      <view class="info_item" @click="show=!show">
        <text class="info_left">出生日期</text>
        <view class="info_right">
          <text>{{ userBirthday || '请选择出生日期' }}</text>
          <!-- 日历 -->
          <u-calendar v-model="show" :mode="mode" @change="getBirth"></u-calendar>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      <!-- 身高 -->
      <view class="info_item">
        <text class="info_left">身高</text>
        <view class="info_right">
          <view class="info_r_ipt">
            <input type="digit" v-model="u_height" max='150' class="info_ipt" placeholder="请输入您的身高" placeholder-class='placeholder'>
            <text>厘米</text>
          </view>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      <!-- 体重 -->
      <view class="info_item">
        <text class="info_left">体重</text>
        <view class="info_right">
          <view class="info_r_ipt">
            <input type="digit" v-model="u_weight" class="info_ipt" placeholder="请输入您的体重" placeholder-class='placeholder'>
            <text>公斤</text>
          </view>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      <!-- BMI -->
      <view class="info_item">
        <text class="info_left">BMI</text>
        <view class="info_right">
          <view class="info_r_ipt">
            {{ BMI }}
          </view>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      <!-- 特殊情况 -->
      <view class="info_item" @click="tsShow = !tsShow">
        <text class="info_left">特殊情况</text>
        <view class="info_right">
          <u-select v-model="tsShow" :list="tsList" @confirm="tsConfirm"></u-select>
          <text>{{ special || '请选择特殊情况' }}</text>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 保存按钮 -->
    <view class="bc_btn">
      <button @click="keepInfo">保存信息</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        sexShow: false, // 控制性别选择器的显示与隐藏
        tsShow: false, // 控制特殊情况选择器的显示与隐藏
        // 性别选择器内容
        list: [{
            value: 1,
            label: '男'
          },
          {
            value: 2,
            label: '女'
          }
        ],
        // 特殊情况选择器内容
        tsList: [
          {
              value: 0,
              label: '正常'
            },
          {
            value: 1,
            label: 'I型糖尿病'
          },
          {
            value: 2,
            label: 'Ⅱ型糖尿病'
          },
          {
            value: 3,
            label: '混合型糖尿病'
          },
          {
            value: 4,
            label: '其他特殊类型'
          }
        ],
        show: false, // 控制日历显示与隐藏
        mode: 'date', // 设置日历
        Checkbirthday: '', // 通过选择获取的生日
        userBirthday:'', // 满足条件的用户生日
        sex: '', // 性别 
        
        u_height: '', // 身高
        u_weight: '', // 体重
        special: ''
      };
    },
    computed:{
      // 计算BMI
      BMI(){
        let bmi =  (this.u_weight / (this.u_height/100 * this.u_height/100)).toFixed(1)
          if(bmi<18.5){
            return '营养不良'
          }else if(bmi >= 18.5 && bmi < 24.9){
            console.log(123);
            return '正常'
          }else if(bmi >=25 && bmi < 29.9){
            return '肥胖'
          }else{
            return '肥胖'
          }
      }
    },
    methods: {
      // 选择出生年月日
      getBirth(e) {
        this.Checkbirthday = e.result
      },
      // 获取性别
      confirm(e) {
        this.sex = e[0].label
      },
      // 获取特殊情况值的方法
      tsConfirm(e) {
        this.special = e[0].label
      },
      // 页面一挂载完成，获取用户信息（mounted 中调用该方法）
      async getInfo() {
        const data = {
          open_id: '123457'
        }
        try {
          const {
            data: res
          } = await uni.$http.post('/userinfo/getUserinfo', data)
          this.userBirthday = res.data.birthday
          this.sex = res.data.sex
          this.u_height = res.data.height
          this.u_weight = res.data.weight
          this.special = res.data.special_Case
        } catch (err) {
          console.log(err);
        }
      },
      // 保存修改信息
      async keepInfo() {
        const data = {
          open_id: '123457',
          sex: this.sex,
          age: 20,
          birthday: this.userBirthday,
          height: this.u_height,
          weight: this.u_weight,
          special_Case: this.special
        }
        try{
          const {
            data: res
          } = await uni.$http.post('/userinfo/updateUserInfo', data)
          if (res.status == 0) {
            uni.$showMsg('修改成功')
            // 修改成功，跳转至首页
           setTimeout(()=>{
             uni.switchTab({
               url:'/pages/index/index'
             })
           },300)
          } else {
             uni.$showMsg('修改失败，请重试')
          }
        }catch(e){
          console.log(e);
        }
      },
      // 失去焦点，判断 输入的身高是否合理
      // blur(){
      //   console.log(this.u_height);
      //   if(this.u_height >= 30 && this.u_height <= 170){
      //     return
      //   }else{
      //     // this.u_height = null
      //     uni.$showMsg('请输入合理的身高')
      //     return
      //   }
      // }
    },
    watch:{
    // 监听Checkbirthday，年龄在2~18岁
      Checkbirthday:{
        handler(newValue,oldValue){
          // 获取当前年份
          let date = new Date().getFullYear()
          // 处理选择的生日,得到相应的年份,并转成数字型
          let checkYear = (newValue.split('-')[0]) * 1
          // 判断年龄是否在2~18岁之间，若在则添加生日，否则提示用户
          if(date - checkYear >= 2 && date - checkYear <= 18){
            this.userBirthday = newValue
          }else{
            uni.$showMsg('此小程序仅适用于2~18岁的用户')
            return
          }
        }
      },
    },
    mounted() {
      this.getInfo()
    }
  }
</script>

<style lang="scss">
  page {
    background: rgba(245, 246, 250, 1);
  }
  .placeholder{
    // font-size: 30rpx;
    // color: red;
    color: #ccc;
  }

  .info_box {
    width: 672rpx;
    // height: 646rpx;
    margin: 0 auto;
    margin-top: 86rpx;
    border-radius: 32rpx;
    padding-top: 52rpx;
    padding-bottom: 32rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;

    .info_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 556rpx;
      margin: 0 auto;
      font-size: 36rpx;
      font-weight: 400;
      padding-bottom: 12rpx;
      margin-bottom: 46rpx;
      border-bottom: 1rpx solid #ccc;

      .info_left {
        color: rgba(73, 69, 75, 1);
      }

      .info_right {
        display: flex;
        align-items: center;
        color: rgba(166, 166, 166, 1);

        .info_r_ipt {
          display: flex;
          align-items: center;

          .info_ipt {
            width: 300rpx;
            text-align: right;
          }
        }

        image {
          width: 40rpx;
          height: 40rpx;
          margin-left: 5rpx;
        }
      }
    }
  }

  // 保存信息
  .bc_btn button {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    width: 672rpx;
    height: 112rpx;
    text-align: center;
    line-height: 112rpx;
    border-radius: 32rpx;
    transform: translateX(-50%);
    background: rgba(255, 121, 83, 1);

    font-size: 48rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
</style>
